<template>
  <div class="userCenter-container">
    <div class="integral-content">
      <div class="integral-item">积分余额：{{ tokens }}</div>
      <div class="integral-item">
        VIP过期时间：{{ expireTime | amountFormat }}
      </div>
    </div>
    <div class="recharge-content">
      <div class="recharge-left">
        <div class="title">积分充值</div>
        <div class="list">
          <div
            v-for="item in integral"
            :key="item.time"
            class="card"
            :class="{ on: checked.title == item.title }"
            @click="selectItem(item)"
          >
            <div class="time">{{ item.title }}</div>
            <div class="price">￥{{ item.price | amountFormat }}</div>
          </div>
        </div>
        <el-divider class="divider">说明：虚拟产品购买后不支持退款</el-divider>
      </div>
      <div v-show="QRImgUrl" class="recharge-right">
        <img class="code" :src="QRImgUrl" alt="" />
        <div class="price">￥{{ checked.price | amountFormat }}</div>
        <!-- <img class="tip" src="@/assets/imgs/code_tip.png" alt="" /> -->
        <div class="tips">
          支持：
          <!-- <span class="icon icon-zfb"></span>支付宝 / -->
          <span class="icon icon-wx"></span>微信支付
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import QRCode from "qrcode";
import { fetchData } from "@/utils";
import { getProductList, getPayCode, getOrderStatus } from "@/api/api";

export default {
  props: {
    tokens: {
      type: String,
      default: "",
    },
    expireTime: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      integral: [
        { title: "积分积分积分积分积分", price: "3000" },
        { title: "100积分", price: "3000" },
        { title: "200积分", price: "3000" },
        { title: "300积分", price: "3000" },
      ],
      checked: {},
      orderNo: "",
      QRImgUrl: "",
      QRCodeTimeout: null,
    };
  },
  mounted() {
    this.getProductList();
  },
  beforeDestroy() {
    clearInterval(this.QRCodeTimeout);
  },
  methods: {
    getProductList() {
      fetchData(getProductList).then((res) => {
        this.integral = res;
      });
    },
    selectItem(item) {
      clearInterval(this.QRCodeTimeout);
      let params = {
        productId: item.id,
        userid: 1,
      };
      this.checked = item;
      fetchData(getPayCode, params, false).then((res) => {
        const { codeUrl, orderNo } = res;
        this.orderNo = orderNo;
        this.getQRcode(codeUrl);
      });
    },
    getQRcode(codeUrl) {
      let opts = {
        errorCorrectionLevel: "L", //容错级别
        type: "image/png", //生成的二维码类型
        quality: 0.5, //二维码质量
        margin: 4, //二维码留白边距
        width: 136, //宽
        height: 136, //高
        text: "", //二维码内容
        color: {
          dark: "#666666", //前景色
          light: "#fff", //背景色
        },
      };
      QRCode.toDataURL(codeUrl, opts, (err, url) => {
        if (err) throw err;
        //将生成的二维码路径复制给data的QRImgUrl
        this.QRImgUrl = url;
        // 轮询请求状态
        this.QRCodeTimeout = setInterval(() => {
          this.getOrderStatus();
        }, 3000);
      });
    },
    getOrderStatus() {
      fetchData(getOrderStatus, this.orderNo, false).then((res) => {
        if (res.message != "未支付") {
          clearInterval(this.QRCodeTimeout);
          this.QRImgUrl = "";
          if (res.message == "支付成功") {
            this.$message.success("支付成功!");
            this.$parent.getUserAsset();
          }
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.userCenter-container {
  padding: 30px 0;
  .integral-content {
    display: flex;
    align-items: center;
    color: var(--color-user-text);
    .integral-item {
      width: 230px;
      height: 20px;
      padding-right: 10px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      font-size: 14px;
      font-weight: 400;
    }
  }
  .recharge-content {
    display: flex;
    .recharge-left {
      width: 795px;
      /deep/ .el-divider {
        margin: 60px 0;
        background-color: var(--border-color);
      }
      /deep/ .el-divider__text {
        font-size: 14px;
        color: var(--border-color);
        background-color: var(--color-tip-background);
      }
      .title {
        font-size: 18px;
        font-weight: 700;
        line-height: 26px;
        margin: 30px 0 15px 0;
        color: var(--color-nav-text);
      }
      .list {
        display: flex;
        flex-wrap: wrap;
        .card {
          width: 185px;
          height: 96px;
          border-radius: 13px;
          background: var(--color-card-background);
          margin: 0 10px 10px 0;
          font-size: 18px;
          font-weight: 700;
          color: #fff;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          text-align: center;
          .price {
            margin-top: 20px;
          }
          &.on {
            background: var(--color-primary);
          }
        }
      }
    }
    .recharge-right {
      width: 194px;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 98px;
      .code {
        width: 136px;
        height: 136px;
        border: 1px solid var(--border-color);
      }
      .price {
        margin-top: 14px;
        font-size: 18px;
        font-weight: 700;
        line-height: 26px;
        color: var(--color-user-text);
      }
      .tips {
        font-size: 12px;
        font-weight: 400;
        white-space: nowrap;
        color: #c8c8c8;
        display: flex;
        align-items: center;
        margin-top: 10px;
        .icon {
          width: 14px;
          height: 14px;
          background-size: cover !important;
          margin-right: 3px;
          &.icon-wx {
            background: url("../../../assets/imgs/wechat_icon.png") no-repeat;
          }
        }
      }
    }
  }
}
</style>
